<template>
        <div class="but">
            <button @click="chooseInd = 0;" :class="{'chosen': chooseInd == 0}">我指导的团队</button>
            <button @click="chooseInd = 1" :class="{'chosen': chooseInd== 1}">我指导的个人</button>
        </div>
        <div class="mainBox">
            <!-- <TeamList v-show="chooseInd==0"/>
            <StudentItemList v-show="chooseInd==1"/> -->
            <components v-is="chooseInd? StudentItemList:TeamList"></components>
        </div>
</template>
<script setup>
import {useRouter} from 'vue-router'
import TeamList from '../../components/TeamList.vue';
import StudentItemList from '../../components/StudentItemList.vue';
import {ref} from 'vue'

const router = useRouter();

const chooseInd = ref(0);

//去学生团队详情页面
const goManageStudentTeam = function(){
    router.push('/ManageStudentTeam')
}

//去学生单人页面
const goManageStudent = function(){
    router.push('/ManageStudent')
}
</script>
<style scoped>

.but {
    width: 100%;
    display: flex;

}
.but button {
    width: 170px;
	height: 50px;
	background-color: #707070;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 10px;
	opacity: 0.8;
    font-family: Source Han Sans CN;
	font-size: 1.1em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 0px;
	color: #ffffff;
    cursor: pointer;
    border: 0px;
}
.but button:nth-child(2){
    margin-left: 3.4%;
}

.but button:hover,
.chosen {
    background-color: #8493a6 !important;
    transition: 0.2s;
}
.chooseBut{
    background-color: #89898a;
}
.mainBox{
    margin-top: 3%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

</style>